<!--
 * @Author: your name
 * @Date: 2020-06-29 14:03:21
 * @LastEditTime: 2020-07-08 10:26:48
 * @LastEditors: Please set LastEditors
 * @Description: 商品详情页
 * @FilePath: \JKShopping\jkshopping\src\pages\home\components\goodsDetails.vue
--> 
<template>
  <div class="goodsDetails" style="height:1000px">
    <div class="back" @click="goback">
      <svg
        t="1593414203795"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="6763"
        width="200"
        height="200"
      >
        <path
          d="M512 0.666c282.982 0 511.334 229.478 511.334 511.334S793.856 1023.334 512 1023.334 0.666 793.856 0.666 512 229.018 0.666 512 0.666zM331.52 539.853l254.003 255.13a38.656 38.656 0 0 0 27.853 11.11 39.014 39.014 0 0 0 27.853-66.867L413.952 512l226.15-223.949c15.616-15.565 15.616-40.09 0-54.579-15.564-15.565-40.09-15.565-54.579 0L331.52 485.274a36.966 36.966 0 0 0-11.162 27.852c0 8.91 3.38 18.944 11.162 26.727z"
          p-id="6764"
        />
      </svg>
    </div>
    <!-- 商品轮播 -->
    <swiper :gallery="gallery"></swiper>

    <!-- 商品信息 -->
    <goodsInfo :datas="datas"></goodsInfo>

    <!-- 商品评论 -->
    <comment :comments="comments"></comment>

    <!-- 图文详情 -->
    <goodsDesc :goods_desc="goods_desc"></goodsDesc>

    <!-- 加入购物车 -->
    <shopcar></shopcar>

    <!-- 商品sku -->
    <sku :datas="datas" :goodsColor="goodsColor" :goodsSize="goodsSize" :skuData="skuData"></sku>
  </div>
</template>

<script>
import * as api from "@/api/apiList/goods/goods.js";
import swiper from "./components/swiper.vue";
import goodsInfo from "./components/goodsInfo.vue";
import comment from "./components/comment.vue";
import goodsDesc from "./components/goodsDesc.vue";
import shopcar from "./components/shopcar.vue";
import sku from "./components/sku.vue";
export default {
  props: ["id"],
  data() {
    return {
      datas: {}, //对应id商品数据
      gallery: [], //商品轮播
      comments: [], //商品评论列表
      goods_desc: "", //图文详情
      goodsColor: {}, //商品颜色
      goodsSize: {}, //商品码数
      skuData: [] //商品sku数据
    };
  },
  components: {
    swiper,
    goodsInfo,
    comment,
    goodsDesc,
    shopcar,
    sku
  },
  methods: {
    goback() {
      //返回
      this.$router.back();
    },
    async API_detail(id) {
      //商品详情
      return await api.detail(id);
    }

    // async API_category_comment(id) {
    //   //商品评论列表
    //   return await api.category_comment(id);
    // }
  },

  async activated() {
    let res = await this.API_detail(this.id);

    //  console.log(typeof res.data.data.sku)
    if (res.data.code === 200) {
      this.datas = res.data.data;
      this.gallery = res.data.data.gallery;
      this.skuData = res.data.data.sku;
      this.goodsColor = res.data.data.attr_relation[0];
      this.goodsSize = res.data.data.attr_relation[1];
      this.goods_desc = res.data.data.goods_desc.replace(/<p><br><\/p>/g, "");

      // console.log(this.datas);
    }

    // let res2 = await this.API_category_comment(this.id);
    // if(res2.data.code===200){
    //   this.comments=res2.data.data
    // }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/home/goodsDetails.scss";
</style>